<template>
  <el-dialog title="弹窗配置" append-to-body :visible.sync="showEditDialog" :fullscreen="true" v-if="showEditDialog">
    <div class="stationui">
      <el-row :gutter="5">
        <!-- 采用Element Layout布局 栅格系统 分为24栅格 Bootstrap为12栅格 -->
        <!-- 左侧边栏界面设计 -->
        <el-col :span="3" class="row-left">
          <el-card class="box-card">
            <!-- 左侧边栏 -->
            <div slot="header" class="clearfix">
              <span>界面设计</span>
            </div>
            <div class="palette-list">
              <p class="palette-type">
                <!-- *采用Element的移入提示和向下指示图标 -->
                <i class="el-icon-caret-bottom"></i>布局设置
                <!-- 右侧鼠标移入功能说明 -->
                <el-tooltip class="item" effect="dark" content="在这里选择你的栅格布局,栅格总数默认为12" placement="right">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </p>
              <ul class="">
                <!--
                  H5 拖拽应用
                  1. @dragstart="dragstart($event, item.val)",设置元素开始拖拽时绑定的函数；
                  2. draggable="true"，设置该元素可拖拽；
                  3. data-type
               -->
                <li>
                  <div class="drag-item" @dragstart="dragstart($event)" draggable="true" data-type="col_12" id="col_12">
                    <div class="col-item">
                      <div class="col-item-child"></div>
                    </div>
                    <div class="drag-item-name">12</div>
                  </div>
                </li>
                <li>
                  <div class="drag-item" @dragstart="dragstart($event)" draggable="true" data-type="col_6_6" id="col_6_6">
                    <div class="col-item">
                      <div class="col-item-child"></div>
                      <div class="col-item-child"></div>
                    </div>
                    <div class="drag-item-name">6 : 6</div>
                  </div>
                </li>
                <li>
                  <div class="drag-item" @dragstart="dragstart($event)" draggable="true" data-type="col_4_8" id="col_4_8">
                    <div class="col-item">
                      <div class="col-item-child" style="width: 33%; flex: none"></div>
                      <div class="col-item-child"></div>
                    </div>
                    <div class="drag-item-name">4 : 8</div>
                  </div>
                </li>
                <li>
                  <div class="drag-item" @dragstart="dragstart($event)" draggable="true" data-type="col_4_4_4" id="col_4_4_4">
                    <div class="col-item">
                      <div class="col-item-child"></div>
                      <div class="col-item-child"></div>
                      <div class="col-item-child"></div>
                    </div>
                    <div class="drag-item-name">4 : 4 : 4</div>
                  </div>
                </li>
                <li>
                  <div class="drag-item" @dragstart="dragstart($event)" draggable="true" data-type="col_3_3_3_3" id="col_3_3_3_3">
                    <div class="col-item">
                      <div class="col-item-child"></div>
                      <div class="col-item-child"></div>
                      <div class="col-item-child"></div>
                      <div class="col-item-child"></div>
                    </div>
                    <div class="drag-item-name">3 : 3 : 3 : 3</div>
                  </div>
                </li>
                <!-- <li>
                <div class="drag-item" @dragstart="dragstart($event)" draggable="true" data-type="col_custom" id="col_custom">
                  <div class="col-item">
                    <div class="col-item-child"></div>
                  </div>
                  <div class="drag-item-name">自定义</div>
                </div>
              </li> -->
              </ul>
              <p class="palette-type">
                <i class="el-icon-caret-bottom"></i>组件设置
                <el-tooltip class="item" effect="dark" content="选择一些组件形成操作界面" placement="right">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </p>
              <ul class="" style="height: calc(100vh - 443px); overflow: auto">
                <li v-for="(componentItem, index) in ComponentList" :key="index">
                  <!-- 类名一定注意不能轻易改变 ComponentList 的数据还未处理 -->
                  <div class="drag-item" @dragstart="dragstart($event)" draggable="true" :data-type="componentItem.type" :id="componentItem.type">
                    <div class="col-item-icon">
                      <img :src="componentItem.icon" alt="" />
                    </div>
                    <div class="drag-item-name">
                      {{ componentItem.name }}
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 右侧上(保存等操作)、下(画布) -->
        <el-col :span="21" class="row-center">
          <el-card class="box-card">
            <!-- 画布空间 -->
            <el-row :gutter="5" class="designer-box">
              <!-- 画布内容 -->
              <el-col :span="19">
                <el-card>
                  <div
                    class="designer-div dialog-div"
                    :class="{ 'designer-div-pda': dialogInfo.clientType === 'PDA' }"
                    @drop="designerDivDrop($event)"
                    @dragover="designerDivAllowDrop($event)"
                  >
                    <!--
                    @drop.prevent='drop($event)' 拖拽目标元素接收拖拽结束后的监听函数；
                    @dragover.prevent='' 用于阻止浏览器默认事件，否则拖动到该要素位置时，鼠标会出现禁止图标样式
              -->
                  </div>
                </el-card>
              </el-col>
              <el-col :span="5" class="attr-div">
                <template v-if="!dialogModel.dataType">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>弹窗基本信息</span>
                    </div>
                    <el-tabs class="nav-tab" v-model="activeName" @tab-click="turnToInputNameClick()">
                      <el-tab-pane label="基本信息" name="TabsstationInfoConfig">
                        <!-- 使用Avue写form表单,定义基础信息内容,后来认为Avue可能监听不到表中的事件,还是使用原生 -->
                        <!-- <avue-form id="dialogInfo" v-model="dialogInfo" :option="stationInfoOption"></avue-form> -->
                        <div class="tab-pane active" id="stationInfoConfig">
                          <el-form :dialogModel="dialogInfo" label-width="110px" label-position="top">
                            <el-form-item>
                              <span slot="label"><span class="required text-danger">*</span>弹窗名称:</span>
                              <el-input v-model="dialogInfo.zhCnName" name="zhCnName" :clearable="true"></el-input>
                            </el-form-item>
                          </el-form>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="初始加载" name="stationInitConfig">
                        <div class="tab-pane" id="stationInitConfig">
                          <el-form ref="form" :dialogModel="dialogInfo" label-width="110px" label-position="top">
                            <el-form-item label="光标默认位置:">
                              <el-select name="initInputName" :clearable="true" v-model="dialogInfo.initInputName">
                                <el-option v-for="item in inputComList" :key="item.field" :label="item.labelName" :value="item.field"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-button class="addRequestBtn" type="primary" size="small" icon="el-icon-plus" @click="openCommonDataModal('station', null)"
                              >添 加 响 应</el-button
                            >
                            <div class="" style="height: calc(100vh - 480px); overflow: auto">
                              <el-card class="box-card request-item-content" v-for="(item, index) in stationInitRequestList" :key="index">
                                <el-button
                                  style="width: 23px; float: right; padding: 3px 3px; margin: 3px 0"
                                  type="info"
                                  icon="el-icon-close"
                                  circle
                                  @click="removeStationRequestInitItem(index)"
                                ></el-button>
                                <el-form :dialogModel="dialogInfo" label-width="110px" label-position="top">
                                  <el-form-item>
                                    <span slot="label">响应{{ index + 1 }}:</span>
                                    <el-input placeholder="请输入内容" name="commonDataName" :value="item.zhCnName" disabled class="input-with-select">
                                      <el-button slot="append" icon="el-icon-search" @click="openCommonDataModal('station', index)"></el-button>
                                    </el-input>
                                  </el-form-item>
                                  <el-form-item label="序号:">
                                    <el-input-number
                                      v-model="item.sequence"
                                      controls-position="right"
                                      name="sequence"
                                      @blur="saveApiSequence(item.sequence, index)"
                                    ></el-input-number>
                                  </el-form-item>
                                  <el-form-item label="API参数信息:">
                                    <el-button size="small" @click="openApiParamsModal('station', index)">编辑信息</el-button>
                                  </el-form-item>
                                  <el-form-item label="API返回信息:">
                                    <el-button size="small" @click="openApiResponseModal('station', index)">编辑信息</el-button>
                                  </el-form-item>
                                  <el-form-item label="开启定时调用:">
                                    <el-switch
                                      v-model="item.isEnableIntervalCall"
                                      active-text="是"
                                      inactive-text="否"
                                      @change="isEnableIntervalCallChange($event, index)"
                                    ></el-switch>
                                  </el-form-item>
                                  <el-form-item label="定时调用时间(ms):" v-if="item.isEnableIntervalCall">
                                    <el-input-number
                                      v-model="item.IntervalTime"
                                      controls-position="right"
                                      name="IntervalTime"
                                      @blur="saveApiIntervalTime(item.IntervalTime, index)"
                                    ></el-input-number>
                                  </el-form-item>
                                </el-form>
                              </el-card>
                            </div>
                          </el-form>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                  </el-card>
                </template>
                <template v-if="dialogModel.dataType">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>组件属性</span>
                    </div>
                    <el-tabs class="nav-tab" v-model="dragItemInfo" @tab-click="turnToInputNameClick()">
                      <el-tab-pane label="基本信息" name="dragItemInfoConfig">
                        <div class="tab-pane" id="dragItemInfoConfig">
                          <el-form :dialogModel="dialogModel" label-width="110px" label-position="top">
                            <el-form-item
                              v-if="
                                dialogModel.dataType != 'qrcode' && dialogModel.dataType != 'chart' && dialogModel.dataType != 'picture' && dialogModel.dataType != 'hidebtn'
                              "
                            >
                              <span slot="label"><span class="required text-danger">*</span>组件名称:</span>
                              <el-input
                                name="labelName"
                                v-model="dialogModel.labelName"
                                :clearable="true"
                                @keyup.native="formKeyUpFunction()"
                                :disabled="dialogModel.dataType === 'extended-fields' || dialogModel.dataType === 'record-item'"
                              ></el-input>
                            </el-form-item>
                            <el-form-item
                              v-if="
                                dialogModel.dataType != 'qrcode' && dialogModel.dataType != 'chart' && dialogModel.dataType != 'picture' && dialogModel.dataType != 'hidebtn'
                              "
                            >
                              <span slot="label"><span class="required text-danger">*</span>字段名称:</span>
                              <el-input placeholder="请输入内容" name="field" v-model="dialogModel.field" class="input-with-select" @keyup.native="formKeyUpFunction()">
                                <template
                                  v-if="
                                    dialogModel.dataType === 'input' ||
                                    dialogModel.dataType === 'input-checkbox' ||
                                    dialogModel.dataType === 'textarea' ||
                                    dialogModel.dataType === 'select' ||
                                    dialogModel.dataType === 'radio' ||
                                    dialogModel.dataType === 'checkbox' ||
                                    dialogModel.dataType === 'select-data' ||
                                    dialogModel.dataType === 'button'
                                  "
                                >
                                  <el-button slot="append" icon="el-icon-search" @click="openCommonParamsModal()"></el-button>
                                </template>
                                <template
                                  v-if="
                                    dialogModel.dataType === 'info-input' ||
                                    dialogModel.dataType === 'card' ||
                                    dialogModel.dataType === 'table' ||
                                    dialogModel.dataType === 'report'
                                  "
                                >
                                  <el-button slot="append" icon="el-icon-search"></el-button>
                                </template>
                              </el-input>
                            </el-form-item>
                            <template v-if="dialogModel.dataType === 'select'">
                              <!-- <el-form-item label="下拉框值字段名:">
                              <el-input v-if="dialogModel.optionField" name="optionField" v-model="dialogModel.optionField" :clearable="true" @keyup.native="formKeyUpFunction()"></el-input>
                            </el-form-item>
                            <el-form-item label="文本字段名:">
                              <el-input name="optionText" v-model="dialogModel.optionText" :clearable="true" @keyup.native="formKeyUpFunction()"></el-input>
                            </el-form-item> -->
                              <el-form-item label="数据源:">
                                <el-input name="checkStepApiName" v-model="dialogModel.optionListApi" disabled class="input-with-select">
                                  <el-button slot="append" icon="el-icon-search" @click="openOptionListApiModal()"></el-button>
                                </el-input>
                              </el-form-item>
                              <el-form-item label="请求参数:">
                                <el-input
                                  name="dataSourceFormat"
                                  v-model="dialogModel.dataSourceRequestParam"
                                  :clearable="true"
                                  @keyup.native="dataSourceRequestParamKeyUpFunction()"
                                ></el-input>
                              </el-form-item>
                              <el-form-item label="数据源格式:">
                                <el-input
                                  name="dataSourceFormat"
                                  v-model="dialogModel.dataSourceFormat"
                                  :clearable="true"
                                  @keyup.native="dataSourceFormatKeyUpFunction()"
                                ></el-input>
                              </el-form-item>
                            </template>
                            <el-form-item
                              label="默认值:"
                              v-if="
                                dialogModel.dataType !== 'border-title' &&
                                dialogModel.dataType !== 'button' &&
                                dialogModel.dataType !== 'check-step' &&
                                dialogModel.dataType !== 'table' &&
                                dialogModel.dataType !== 'report' &&
                                dialogModel.dataType !== 'vehicle' &&
                                dialogModel.dataType !== 'extended-fields' &&
                                dialogModel.dataType !== 'attribute-copy' &&
                                dialogModel.dataType !== 'multiple-print' &&
                                dialogModel.dataType !== 'record-item' &&
                                dialogModel.dataType !== 'file-button' &&
                                dialogModel.dataType !== 'qrcode' &&
                                dialogModel.dataType !== 'chart' &&
                                dialogModel.dataType != 'picture' &&
                                dialogModel.dataType != 'hidebtn'
                              "
                            >
                              <el-input name="defaultValue" v-model="dialogModel.defaultValue" :clearable="true" @keyup.native="defaultValueKeyUpFunction()"></el-input>
                            </el-form-item>
                            <el-form-item v-if="dialogModel.dataType === 'check-step'">
                              <span slot="label"><span class="required text-danger">*</span>API响应:</span>
                              <el-input name="checkStepApiName" v-model="dialogModel.checkStepApiName" disabled class="input-with-select">
                                <el-button slot="append" icon="el-icon-search" @click="openCommonDataModal('apiResponse', null)"></el-button>
                              </el-input>
                            </el-form-item>
                            <template
                              v-if="
                                dialogModel.dataType === 'input' ||
                                dialogModel.dataType === 'input-checkbox' ||
                                dialogModel.dataType === 'textarea' ||
                                dialogModel.dataType == 'info-input' ||
                                dialogModel.dataType === 'select-data' ||
                                dialogModel.dataType == 'radio' ||
                                dialogModel.dataType === 'checkbox' ||
                                dialogModel.dataType === 'fileinput' ||
                                dialogModel.dataType === 'vehicle'
                              "
                            >
                              <el-form-item label="默认提示:">
                                <el-input name="placeholder" v-model="dialogModel.placeholder" :clearable="true" @keyup.native="formKeyUpFunction()"></el-input>
                              </el-form-item>
                              <el-form-item label="输入建议:">
                                <el-input
                                  name="defaultTipMessage"
                                  v-model="dialogModel.defaultTipMessage"
                                  :clearable="true"
                                  @keyup.native="defaultTipMessageKeyUpFunction()"
                                ></el-input>
                              </el-form-item>
                            </template>
                            <template v-if="dialogModel.dataType === 'input'">
                              <el-form-item label="输入框类型:">
                                <el-select v-model="dialogModel.inputType" name="inputType" :clearable="true" @change="onChangeInputType($event)">
                                  <el-option label="字符串" value="text"></el-option>
                                  <el-option label="数字" value="number"></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item label="正则表达式:">
                                <el-input name="regexp" v-model="dialogModel.regexp" :clearable="true" @keyup.native="regexpKeyUpFunction()"></el-input>
                              </el-form-item>
                            </template>
                            <template v-if="dialogModel.dataType === 'vehicle'">
                              <el-form-item label="载具类型:">
                                <el-select v-model="dialogModel.vehicleType" name="vehicleType" :clearable="true" @change="onChangeVehicleType($event)">
                                  <el-option v-for="(item, index) in vehicleTypeList" :key="index" :label="item.dictValue" :value="item.dictKey"></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item label="载具类型字段:">
                                <el-input
                                  name="vehicleTypeField"
                                  v-model="dialogModel.vehicleTypeField"
                                  :clearable="true"
                                  @keyup.native="vehicleTypeFieldKeyUpFunction()"
                                ></el-input>
                              </el-form-item>
                            </template>
                            <el-form-item label="扩展字段信息:" v-if="dialogModel.dataType === 'extended-fields'">
                              <el-button type="primary" size="small" icon="el-icon-plus" @click="editExtendedFieldsInfo">编辑扩展字段信息</el-button>
                            </el-form-item>
                            <el-form-item label="记录项信息:" v-if="dialogModel.dataType === 'record-item'">
                              <el-button type="primary" size="small" icon="el-icon-plus" @click="editRecordItemInfo">编辑记录项信息</el-button>
                            </el-form-item>
                            <el-form-item
                              label="必填项:"
                              v-if="
                                dialogModel.dataType === 'input' ||
                                dialogModel.dataType === 'textarea' ||
                                dialogModel.dataType === 'info-input' ||
                                dialogModel.dataType === 'select-data' ||
                                dialogModel.dataType == 'radio' ||
                                dialogModel.dataType === 'checkbox' ||
                                dialogModel.dataType === 'printers' ||
                                dialogModel.dataType === 'print-label' ||
                                dialogModel.dataType === 'fileinput' ||
                                dialogModel.dataType === 'table' ||
                                dialogModel.dataType === 'vehicle' ||
                                dialogModel.dataType === 'select'
                              "
                            >
                              <el-radio name="isRequired" v-model="dialogModel.isRequired" label="true" @change="isRequiredChange($event)">是</el-radio>
                              <el-radio name="isRequired" v-model="dialogModel.isRequired" label="false" checked @change="isRequiredChange($event)">否</el-radio>
                            </el-form-item>
                            <el-form-item label="禁用:" v-if="dialogModel.dataType === 'textarea' || dialogModel.dataType === 'select-data'">
                              <el-radio name="isDisabled" v-model="dialogModel.isDisabled" label="true" @change="isDisabledChange(dialogModel.dataType, $event)">是</el-radio>
                              <el-radio name="isDisabled" v-model="dialogModel.isDisabled" label="false" checked @change="isDisabledChange(dialogModel.dataType, $event)"
                                >否</el-radio
                              >
                            </el-form-item>
                            <el-form-item label="填入数据后需要禁用的输入框:" v-if="dialogModel.dataType === 'table'">
                              <el-select v-model="dialogModel.disabledInputName" name="disabledInputName" :clearable="true" @change="disabledInputNameChange($event)">
                                <el-option :label="item.labelName" :value="item.field" v-for="item in inputComList" :key="item.field"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="开启缓存:" v-if="dialogModel.dataType === 'table'">
                              <el-switch v-model="dialogModel.isEnableCache" active-text="是" inactive-text="否" @change="isEnableCacheChange($event)"></el-switch>
                            </el-form-item>
                            <el-form-item label="多字段单独去重:" v-if="dialogModel.dataType === 'table'">
                              <el-switch
                                v-model="dialogModel.isTogetherVerifyDuplicate"
                                active-text="是"
                                inactive-text="否"
                                @change="isTogetherVerifyDuplicateChange($event)"
                              ></el-switch>
                            </el-form-item>
                            <el-form-item label="表格列信息:" v-if="dialogModel.dataType === 'table'">
                              <el-button type="primary" size="small" icon="el-icon-plus" @click="editColumnInfo">编辑列信息</el-button>
                            </el-form-item>
                            <template v-if="dialogModel.dataType === 'select-data' || dialogModel.dataType === 'printers' || dialogModel.dataType === 'print-label'">
                              <el-form-item label="选择数据类型:">
                                <el-select v-model="dialogModel.selectDataType" name="selectDataType" :clearable="true" @change="onChangeSelectDataType($event)">
                                  <el-option v-for="(item, index) in selectDataTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                              </el-form-item>
                            </template>
                            <el-form-item label="自动扣减合格数:" v-if="dialogModel.dataType === 'attribute-copy'">
                              <el-switch v-model="dialogModel.isAutoDeduction" active-text="是" inactive-text="否" @change="isAutoDeductionChange($event)"></el-switch>
                            </el-form-item>
                            <el-form-item label="本地存储字段值:" v-if="dialogModel.dataType === 'info-input'">
                              <el-switch v-model="dialogModel.isLocalStorage" active-text="是" inactive-text="否" @change="isLocalStorageChange($event)"></el-switch>
                            </el-form-item>
                            <el-form-item label="二维码生成数据来源:" v-if="dialogModel.dataType === 'qrcode'">
                              <el-select
                                v-model="dialogModel.createQrCode"
                                name="createQrCode"
                                :clearable="true"
                                @focus="getDisabledInputComList"
                                @change="createQrCodeChange($event)"
                              >
                                <el-option :label="item.labelName" :value="item.field" v-for="item in disabledInputComList" :key="item.field"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="是否隐藏此模块:" v-if="dialogModel.dataType === 'border-title'">
                              <el-switch v-model="dialogModel.isHideModule" active-text="是" inactive-text="否" @change="isHideModuleChange($event)"></el-switch>
                            </el-form-item>
                            <el-form-item
                              label="默认值:"
                              v-if="dialogModel.selectDataType === 'sequenceDefine' || dialogModel.selectDataType === 'print' || dialogModel.selectDataType === 'labelTemplate'"
                            >
                              <el-input placeholder="请选择默认值" name="defaultSelectDataName" v-model="dialogModel.defaultSelectDataName" class="input-with-select">
                                <el-button slot="append" icon="el-icon-search" @click="openSelectDataModal()"></el-button>
                              </el-input>
                            </el-form-item>
                            <el-form-item label="是否开启混包:" v-if="dialogModel.dataType === 'button'">
                              <el-switch v-model="dialogModel.isSupportMixPack" active-text="是" inactive-text="否" @change="isSupportMixPackChange($event)"></el-switch>
                            </el-form-item>
                            <el-form-item label="混包关联表格字段:" v-if="dialogModel.dataType === 'button' && dialogModel.isSupportMixPack">
                              <el-input name="mixPackField" v-model="dialogModel.mixPackField" :clearable="true" @keyup.native="mixPackFieldKeyUpFunction()"></el-input>
                            </el-form-item>
                            <el-form-item v-if="dialogModel.dataType === 'chart'" label="高度:">
                              <el-input-number
                                style="width: 100%"
                                v-model="dialogModel.chartHeight"
                                controls-position="right"
                                name="chartHeight"
                                @blur="formKeyUpFunction()"
                              ></el-input-number>
                            </el-form-item>
                            <template v-if="dialogModel.dataType === 'chart'">
                              <el-form-item label="内容来源:">
                                <el-button type="primary" size="small" icon="el-icon-plus" @click="addChartSourceInfo">添加来源信息</el-button>
                              </el-form-item>
                              <div style="height: calc(100vh - 453px); overflow: auto">
                                <el-card class="box-card request-item-content" v-for="(item, index) in dialogModel.chartSourceList" :key="index">
                                  <el-button
                                    style="width: 23px; float: right; padding: 3px 3px; margin: 3px 0"
                                    type="info"
                                    icon="el-icon-close"
                                    circle
                                    @click="removeChartSource(index)"
                                  ></el-button>
                                  <el-form :dialogModel="dialogInfo" label-width="110px" label-position="top">
                                    <el-form-item>
                                      <span slot="label">来源{{ index + 1 }}:</span>
                                      <el-input placeholder="请输入来源" name="commonDataName" v-model="item.url" class="input-with-select"></el-input>
                                    </el-form-item>
                                    <el-form-item label="序号:">
                                      <el-input-number
                                        v-model="item.sequence"
                                        controls-position="right"
                                        name="sequence"
                                        @blur="sourceSequenceKeyupFunction(item.sequence, index)"
                                      ></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="参数信息:">
                                      <el-button size="small" @click="openChartSourceParamsModal(index)">编辑参数信息</el-button>
                                    </el-form-item>
                                  </el-form>
                                </el-card>
                              </div>
                            </template>
                            <template v-if="dialogModel.dataType === 'picture'">
                              <el-form-item label="图片路径:">
                                <div class="select-icon">
                                  <el-upload
                                    v-if="!dialogModel.pictureUrl"
                                    class="avatar-uploader picture"
                                    action="/api/blade-resource/oss/endpoint/put-file-attach"
                                    accept="image/png, image/jpeg, image/jpg"
                                    :headers="headersObj"
                                    :show-file-list="false"
                                    :on-success="pictureAvatarSuccess"
                                    :before-upload="pictureBeforeAvatarUpload"
                                  >
                                    <img v-if="dialogModel.pictureUrl" :src="dialogModel.pictureUrl" class="avatar" style="width: 100%; height: 100%" />
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </el-upload>
                                  <div class="select-icon-img" v-if="dialogModel.pictureUrl">
                                    <i class="el-icon-circle-close closer" @click="removepictureUrl()"></i>
                                    <img :src="dialogModel.pictureUrl" alt="图片地址错误" />
                                  </div>
                                </div>
                              </el-form-item>
                            </template>
                            <el-form-item label="隐藏属性:" v-if="dialogModel.dataType === 'hidebtn'">
                              <el-select
                                v-model="dialogModel.hideFormItemList"
                                name="hideFormItemList"
                                :clearable="true"
                                multiple
                                @focus="getDisabledInputComList"
                                @change="hideFormItemListChange($event)"
                              >
                                <el-option :label="item.labelName" :value="item.field" v-for="item in disabledInputComList" :key="item.field"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="是否默认隐藏:" v-if="dialogModel.dataType === 'hidebtn'">
                              <el-switch v-model="dialogModel.isDefaultHide" active-text="是" inactive-text="否" @change="isDefaultHideChange($event)"></el-switch>
                            </el-form-item>
                            <el-form-item
                              label="是否开启缓存:"
                              v-if="dialogModel.dataType === 'printers' || dialogModel.dataType === 'print-label' || dialogModel.dataType === 'multiple-print'"
                            >
                              <el-switch v-model="dialogModel.isCachePrintInfo" active-text="是" inactive-text="否" @change="isCachePrintInfoChange($event)"></el-switch>
                            </el-form-item>
                          </el-form>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane
                        label="交互响应"
                        name="actionConfig"
                        v-if="
                          dialogModel.dataType === 'input' ||
                          dialogModel.dataType === 'input-checkbox' ||
                          dialogModel.dataType === 'textarea' ||
                          dialogModel.dataType === 'select-data' ||
                          dialogModel.dataType === 'button' ||
                          dialogModel.dataType === 'extended-fields' ||
                          dialogModel.dataType === 'vehicle'
                        "
                      >
                        <el-form
                          :dialogModel="dialogModel"
                          label-width="110px"
                          label-position="top"
                          :rules="apiInfoRules"
                          style="height: calc(100vh - 310px); overflow: auto; padding-right: 5px"
                        >
                          <el-form-item label="动作:">
                            <el-select v-model="dialogModel.actionType" name="actionType" :clearable="true" @change="actionType()">
                              <el-option
                                label="回车"
                                value="enter"
                                v-if="
                                  dialogModel.dataType === 'input' ||
                                  dialogModel.dataType === 'input-checkbox' ||
                                  dialogModel.dataType === 'vehicle' ||
                                  dialogModel.dataType === 'select-data'
                                "
                              ></el-option>
                              <el-option label="点击" value="click" v-if="dialogModel.dataType === 'button'"></el-option>
                              <el-option label="选择数据" value="select-data" v-if="dialogModel.dataType === 'select-data'"></el-option>
                              <el-option label="切换" value="change" v-if="dialogModel.dataType === 'select'"></el-option>
                              <el-option label="空格键提交" value="space" v-if="dialogModel.dataType === 'textarea'"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="成功后跳转输入框:">
                            <el-select v-model="dialogModel.turnToInputName" name="turnToInputName" :clearable="true" @change="turnToInputNameChange($event)">
                              <el-option :label="item.labelName" :value="item.field" v-for="item in inputComList" :key="item.field"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="失败后跳转输入框:">
                            <el-select v-model="dialogModel.failTurnToInputName" name="failTurnToInputName" :clearable="true" @change="failTurnToInputNameChange($event)">
                              <el-option :label="item.labelName" :value="item.field" v-for="item in inputComList" :key="item.field"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="无接口跳转输入框:">
                            <el-select v-model="dialogModel.noApiTurnToInputName" name="noApiTurnToInputName" :clearable="true" @change="noApiTurnToInputNameChange($event)">
                              <el-option :label="item.labelName" :value="item.field" v-for="item in inputComList" :key="item.field"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="无接口跳转是否语音提示:">
                            <el-switch v-model="dialogModel.noApiTurnToInputIsMsg" active-text="是" inactive-text="否" @change="noApiTurnToInputIsMsgChange($event)"></el-switch>
                          </el-form-item>
                          <el-form-item label="控制显隐模块:">
                            <el-select v-model="dialogModel.displayOrHideModules" name="displayOrHideModules" :clearable="true" @change="displayOrHideModulesChange($event)">
                              <el-option :label="item.labelName" :value="item.field" v-for="item in displayOrHideModulesList" :key="item.field"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-button class="addRequestBtn" type="primary" size="small" icon="el-icon-plus" @click="openDialogConfigModal()">添 加 弹 窗</el-button>
                          <el-button class="addRequestBtn" type="primary" size="small" icon="el-icon-plus" @click="openCommonDataModal('dragItem', null)">添 加 响 应</el-button>
                          <div class="">
                            <el-card class="box-card request-item-content" v-for="(item, index) in selectedNodeActionList[0].commonDataList" :key="index">
                              <el-button
                                style="width: 23px; float: right; padding: 3px 3px; margin: 3px 0"
                                type="info"
                                icon="el-icon-close"
                                circle
                                @click="removeCommonDataItem(index)"
                              ></el-button>
                              <el-form :dialogModel="dialogInfo" label-width="110px" label-position="top">
                                <el-form-item>
                                  <span slot="label">响应{{ index + 1 }}:</span>
                                  <el-input placeholder="请输入内容" name="commonDataName" :value="item.zhCnName" disabled class="input-with-select">
                                    <el-button slot="append" icon="el-icon-search" @click="openCommonDataModal('dragItem', index)"></el-button>
                                  </el-input>
                                </el-form-item>
                                <el-form-item label="序号:">
                                  <el-input-number
                                    v-model="item.sequence"
                                    controls-position="right"
                                    name="sequence"
                                    @blur="apiSequenceKeyupFunction(item.sequence, index, 'sequence')"
                                  ></el-input-number>
                                </el-form-item>
                                <el-form-item label="触发条件:">
                                  <el-select v-model="item.condition" name="condition" :clearable="true" @change="apiSequenceKeyupFunction(item.condition, index, 'condition')">
                                    <el-option label="内包装到达包规" value="productList.length===standardQuantity"></el-option>
                                    <el-option label="外包装到达包规" value="packingList.length===standardQuantity"></el-option>
                                    <el-option label="载具产品数量达到或大于包规" value="carrierProductQuantity>=standardQuantity"></el-option>
                                    <el-option label="包装称重" value="packWeight"></el-option>
                                    <el-option label="未开启外部条码绑定" value="isSubmitExtendSequenceNumber"></el-option>
                                    <el-option label="存在待提交序列号" value="sequenceNumber != ''"></el-option>
                                    <el-option label="非FAIL" value="sequenceNumberWait != FAIL"></el-option>
                                    <el-option label="失败" value="SYSTEM_FAIL"></el-option>
                                  </el-select>
                                </el-form-item>
                                <el-form-item label="API参数信息:">
                                  <el-button size="small" @click="openApiParamsModal('dragItem', index)">编辑信息</el-button>
                                </el-form-item>
                                <el-form-item label="API返回信息:">
                                  <el-button size="small" @click="openApiResponseModal('dragItem', index)">编辑信息</el-button>
                                </el-form-item>
                              </el-form>
                            </el-card>
                          </div>
                        </el-form>
                      </el-tab-pane>
                    </el-tabs>
                  </el-card>
                </template>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog class="imgIconDialog" title="选择图标（双击进行选择）" append-to-body :visible.sync="showIconImgDialog">
      <div class="stationIconList">
        <div v-for="(item, index) in stationIconList" :key="index" @dblclick="dblclick(item.url)">
          <img :src="item.url" />
        </div>
      </div>
    </el-dialog>
    <el-dialog title="API参数信息设置" append-to-body :visible.sync="showApiDialog">
      <!-- 初始/组件的API参数信息数据展示列表 -->
      <avue-crud
        ref="apiParamsModal"
        :data="dataApiParamsMap"
        :option="apiParamsOption"
        @row-save="apiParamsRowSave"
        @row-update="apiParamsAddUpdate"
        @row-del="apiParamsRowDel"
      ></avue-crud>
      <div v-if="dialogTitle" slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onApiParamsSubmit">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showApiDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- API返回信息设置 -->
    <el-dialog title="API返回信息设置" append-to-body :visible.sync="showApiResponseModal">
      <el-tabs type="border-card" v-if="showApiResponseModal" v-model="apiResponseTabsIndex">
        <el-tab-pane label="返回成功" name="1">
          <avue-crud
            :data="successDoParamsMap"
            :option="successDoParamsOption"
            @row-save="successDoParamsRowSave"
            @row-update="successDoParamsAddUpdate"
            @row-del="successDoParamsRowDel"
          ></avue-crud>
        </el-tab-pane>
        <el-tab-pane label="返回失败" name="2">
          <avue-crud
            :data="failDoParamsMap"
            :option="failDoParamsOption"
            @row-save="failDoParamsRowSave"
            @row-update="failDoParamsAddUpdate"
            @row-del="failDoParamsRowDel"
          ></avue-crud>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onApiResponseSubmit">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showApiResponseModal = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑列信息" append-to-body :visible.sync="showColumnConfigModal">
      <avue-crud :data="columnConfig" :option="columnConfigOption" @row-save="columnConfigRowSave" @row-update="columnConfigAddUpdate" @row-del="columnConfigRowDel"></avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onColumnConfigSubmit">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showColumnConfigModal = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑弹窗列信息" append-to-body :visible.sync="showModalColumnConfigModal">
      <avue-crud
        :data="modalColumnConfig"
        :option="columnConfigOption"
        @row-save="modalColumnConfigRowSave"
        @row-update="modalColumnConfigAddUpdate"
        @row-del="modalColumnConfigRowDel"
      ></avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onColumnConfigSubmit">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showModalColumnConfigModal = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="扩展字段信息" append-to-body :visible.sync="showExtendedFieldsModal" width="80%">
      <avue-crud
        :data="extendedFieldsConfig"
        :option="extendedFieldsConfigOption"
        @row-save="extendedFieldsConfigRowSave"
        @row-update="extendedFieldsConfigUpdate"
        @row-del="extendedFieldsConfigRowDel"
      ></avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onExtendedFieldsConfigSubmit">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showExtendedFieldsModal = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="记录项信息" append-to-body :visible.sync="showRecordItemModal">
      <avue-crud
        :data="recordItemConfig"
        :option="recordItemConfigOption"
        @row-save="recordItemConfigRowSave"
        @row-update="recordItemConfigUpdate"
        @row-del="recordItemConfigRowDel"
      ></avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onRecordItemConfigSubmit">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showRecordItemModal = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 图表组件来源参数配置 -->
    <el-dialog title="参数配置" append-to-body :visible.sync="showChartSourceResponseModal">
      <avue-crud
        :data="chartSourceParamsMap"
        :option="chartSourceParamsOption"
        @row-save="chartSourceParamsRowSave"
        @row-update="chartSourceParamsAddUpdate"
        @row-del="chartSourceParamsRowDel"
      ></avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onChartSourceResponseSubmit">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showApiResponseModal = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 请求前弹窗内容配置 -->
    <el-dialog title="请求前弹窗内容配置" append-to-body :visible.sync="showBeforeRequestModal" width="60%">
      <avue-crud
        :data="beforeRequestData"
        :option="beforeRequestOption"
        @row-save="beforeRequestRowSave"
        @row-update="beforeRequestRowUpdate"
        @row-del="beforeRequestRowDel"
      ></avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onBeforeRequestSubmit">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showBeforeRequestModal = false">取 消</el-button>
      </div>
    </el-dialog>
    <common-modal-template ref="commonModalTemplate" :key="timer" :option="tableOption" @getSelectedRows="getSelectedRows" @newKey="newKey"></common-modal-template>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="onSubmit">保 存</el-button>
      <el-button size="small" icon="el-icon-circle-close" @click="showEditDialog = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import website from '@/config/website';  区分页面书写引入接口数据，改变之前在一整个js的写法
import stationuiDialogDesign from './stationui-dialog-design.js';
export default {
  ...stationuiDialogDesign
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 0;
}
@import './stationui-design.scss';
</style>
